<!-- 클릭시 show - hide, toggle 효과 테스트 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
/*
  특정 DOM노드를 동적으로 나타나게/사라지게하는 jQuery함수.
 	- show()/hide() - toggle()
 	- fadeIn()/fadeOut() - fadeToggle()
 	- slideDown()/slideUp() - slideToggle()
 
 	매개변수(생략가능) - 1. 밀리초 - 애니메이션 효과 시간 
 						 2. 함수 - 애니메이션 효과 종료후 호출될 callback함수 등록.
 						
 */
 	
$(document).ready(function() {
		$("#hideBtn").on("click",function(){
			$("#description").slideUp(1000);
			//$("#description").fadeOut(1000);
			//$("#description").hide(1500);
		});
		
		$("#showBtn").on("click",function(){
			$("#description").slideDown(1000);
			//$("#description").fadeIn(1000);
			//$("#description").show(1500, function() {alert("설명입니다.");});
		});
		
		$("#toggleBtn").on("click", function(){
			$("#description").toggle();	//상황을 반대로 해준다.		
		});
});

</script>

</head>
<body>
녹차<br>
<input type="button" id="hideBtn" value="설명감추기">
<input type="button" id="showBtn" value="설명보기">
<input type="button" id="toggleBtn" value="설명보기 토글">
<p>
<div id="description">
	녹차는 건강에 좋은 차입니다. <br>
	저희는 보성에서 재배된 유기농 녹차를 사용합니다.
	<br>
	<img alt="김홍도 씨름" src="pic.jpg">
</div>

</body>
</html>
























